<template>
	<view>
		<!-- 顶部部分 -->
		<!-- <view class="top_box"> -->
		<!-- <view class="top_box">
			<view class="top_box2">
				<image src="../../static/left_back.png" class="left_back" mode="aspectFill"></image>
				<view class="top_tex">查看认购</view>
				<image src="../../static/headset.png" class="headset" mode="aspectFill"></image>
			</view>
		</view> -->
			<view class="car">
				<view class="name_car">
					<!-- <view class="logo">港</view> --> 
					<logo pattern="1" :text="$t(info.location)" class="logo"></logo>
					<view class="car_text">
						<!-- <view class="car_text1">{{$t('company.xiaomi-tech')}}</view> -->
						<view class="car_text1">{{$getLocaleField(info, 'company_name')}}</view>
						<view class="car_text2">{{info.symbol}}.{{info.location}}</view>
					</view>
				</view>
				<view class="detil" v-if="cash_type == 'cash'">
					<view class="first_box">
						<view class="idera">{{$t('check_subscripti.subs-method')}}</view>
						<view class="right_idera">{{$t('check_subscripti.cash')}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-qty')}}</view>
						<view class="right_idera">{{parseFloat(number).toLocaleString()}}{{$t('shares')}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-amt')}}</view>
						<view class="right_idera">{{parseFloat(money).toLocaleString()}} {{info.currency}}</view>
					</view>
					<!-- <view class="two_box">
						<view class="idera">{{$t('check_subscripti.frozen-funds')}}</view>
						<view class="right_idera">{{frozen.toLocaleString()}} {{info.currency}}</view>
					</view> -->
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-fees')}}</view>
						<view class="right_idera">{{parseFloat(rg_sxf).toLocaleString()}} {{info.currency}}</view>
					</view>
					<view class="total_box">
						<view class="total">{{$t('total')}}</view>
						<view class="right_total">{{parseFloat(total).toLocaleString()}} {{info.currency}}</view>
					</view>
				</view>
				<view class="detil" v-else-if="cash_type == 'financing'">
					<view class="first_box">
						<view class="idera">{{$t('check_subscripti.subs-method')}}</view>
						<view class="right_idera">{{$t('check_subscripti.financing')}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-qty')}}</view>
						<view class="right_idera">{{parseFloat(number).toLocaleString()}}{{$t('shares')}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-amt')}}</view>
						<view class="right_idera">{{parseFloat(money).toLocaleString()}} {{info.currency}}</view>
					</view>
					<!-- <view class="two_box">
						<view class="idera">{{$t('check_subscripti.frozen-funds')}}</view>
						<view class="right_idera">{{frozen.toLocaleString()}} {{info.currency}}</view>
					</view> -->
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.financing-amt')}}</view>
						<view class="right_idera">{{parseFloat(rz_money).toLocaleString()}} {{info.currency}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.yzybzj')}}</view>
						<view class="right_idera">{{(parseFloat(rz_money) * info.margin_rate).toLocaleString()}} {{info.currency}}</view>
					</view>
					<!-- <view class="two_box">
						<view class="idera">{{$t('check_subscripti.ss_yjsf')}}</view>
						<view class="right_idera">{{parseFloat(ss_yjsf).toLocaleString()}} {{info.currency}}</view>
					</view> -->
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.financing-rate')}}</view>
						<view class="right_idera">{{rz_llv}}%</view>
					</view>
					<view class="third_box">
						<view class="idera">{{$t('check_subscripti.frozen_day')}}</view>
						<view class="right_idera">{{frozen_day}}{{$t(`day`)}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.subs-fees')}}</view>
						<view class="right_idera">{{parseFloat(rg_sxf).toLocaleString()}} {{info.ipo_fee_currency}}</view>
					</view>
					<view class="two_box">
						<view class="idera">{{$t('check_subscripti.financing-fees')}}</view>
						<view class="right_idera">{{yj_rzf.toLocaleString()}} HKD</view>
					</view>
					<view class="total_box">
						<view class="total">{{$t('check_subscripti.total')}}</view>
						<view class="right_total">{{parseFloat(total).toLocaleString()}} HKD</view>
					</view>
				</view>
			</view>
			
			<view class="agree_box">
				<view @tap.stop="toAgreedPdf(1)" class="text_row ageer_text2">{{$t('check_subscripti.agreed-name-1')}}</view>
				<view @tap.stop="toAgreedPdf(2)" class="text_row ageer_text2">{{$t('check_subscripti.agreed-name-2')}}</view>
				<view @tap.stop="toAgreedPdf(3)" class="text_row ageer_text2">《{{info.CompanyName}}{{$t('check_subscripti.prospectus')}}》</view>
				<view class="check_row" @click="agree(1)">
					<view class="tick_box">
						<image src="../../static/tick.png" class="tick" v-if="ifagree_one==true"></image>
					</view>
					<view>
						<text class="ageer_text1">{{$t('check_subscripti.agreed-text-1')}}</text>
						<!-- <text @tap.stop="toAgreedPdf(1)" class="ageer_text2">{{$t('check_subscripti.agreed-name-1')}}</text>
						<text @tap.stop="toAgreedPdf(2)" class="ageer_text2">{{$t('check_subscripti.agreed-name-2')}}</text> -->
					</view>
				</view>
				<view class="check_row" @click="agree(2)">
					<view class="tick_box">
						<image src="../../static/tick.png" class="tick" v-if="ifagree_two==true"></image>
					</view>
					<view>
						<text class="ageer_text1">{{$t('check_subscripti.agreed-text-2')}}</text>
					</view>
				</view>
			</view>
			<view v-if="cash_type == 'cash'" class="last_box">
				<view class="last_text1">{{$t('check_subscripti.reminder')}}</view>
				<view class="last_text2">{{$t('check_subscripti.reminder-text1')}}</view>
				<!-- <view class="last_text2">{{$t('check_subscripti.reminder-text2')}}</view> -->
			</view>
			<view v-else-if="cash_type == 'financing'" class="last_box">
				<view class="last_text1">{{$t('check_subscripti.reminder')}}</view>
				<view class="last_text2">{{$t('check_subscripti.reminder-text3')}}</view>
				<view class="last_text2">{{$t('check_subscripti.reminder-text4')}}</view>
			</view>
		<!-- </view> -->
		<view class="but">
			<wzh-btn pattern="2" :text="$t('cancel')" @invokeBtn="navBack()"></wzh-btn>
			<wzh-btn pattern="1" :text="$t('submit')" @invokeBtn="invokeBtn()"></wzh-btn>
		</view>
		
		<tooltips-msg ref="message"></tooltips-msg>
		<tooltips-msg ref="account">
			<view class="message-box">
				<view v-for="(item, index) in account_list" :key="index"
					class="account-item" 
					:class="{acctive:(account_id == item)}"
					@tap="changAcctive(item)"
				>{{item}}</view>
			</view>
		</tooltips-msg>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				ifagree_one: true,
				ifagree_two: true,
				cash_type: "financing",
				
				ky_money: 0,
				money: 0,
				number: 0,
				frozen: 0,
				frozen_day: 0,
				rz_money: 0, //融资金额
				rg_sxf: 0, //认购手续费
				rz_llv: 0, //融资利率
				yj_rzf: 0, //预融资费
				ss_yjsf: 0, //上市佣金税费
				total: 0, //合计
				
				info: {},
				account_id: '',
				account_list: []
			}
		},
		onLoad(opt){
			this.id = opt.id
			this.account_id = opt.account_id
			
            //  自己打印来看看咯
			let options = this.$Route.query
			if(options.cash_type)this.cash_type = options.cash_type
			if(options.money)this.money = options.money
			if(options.num)this.number = options.num
			if(options.id)this.id = options.id
			
			uni.setNavigationBarTitle({
				title:this.$t('pages.order-confirmation')+"("+this.$t('check_subscripti.'+this.cash_type)+")"
			})
			
			this.$appLogin(()=>{
				this.getInfo()
			})
		},
		methods: {
			agree(type){
				if(type == 1){
					this.ifagree_one = !this.ifagree_one
				}
				else if(type == 2){
					this.ifagree_two = !this.ifagree_two
				}
			},
			invokeBtn () {
				if (!this.ifagree_one || !this.ifagree_two) return
				this.$httpPost({
					// url:'test/create_order',
					url:'ipos/create_order',
					data:{
						gp_id:this.id,
						account_id: this.account_id,
						cash_type: this.cash_type,
						money: this.money,
						number: this.number,
						frozen: this.frozen,
						frozen_day: this.frozen_day,
						rz_money: this.rz_money, //融资金额
						rg_sxf: this.rg_sxf, //认购手续费
						rz_llv: this.rz_llv, //融资利率
						yj_rzf: this.yj_rzf, //预融资费
						ss_yjsf: this.ss_yjsf, //上市佣金税费
						total: this.total, //合计
					}
				}).then((res)=>{
					this.$navTo('/orders_history')
				})
				// this.$httpPost({
				// 	url:'ipos/get_account_id',
				// 	data:{
				// 		type: this.cash_type
				// 	}
				// }).then((res)=>{
				// 	// this.$navTo('/orders_history')
				// 	if(!res.data.list || res.data.list.length <=0){ 
				// 		return this.$refs.message.open(this.$t('你还有没有account_id'))
				// 	}
				// 	this.account_list = res.data.list
				// 	this.account_id = res.data.list[0]
				// 	this.$refs.account.open(this.$t('选择账号'), (res) => {
				// 		this.$httpPost({
				// 			// url:'test/create_order',
				// 			url:'ipos/create_order',
				// 			data:{
				// 				gp_id:this.id,
				// 				account_id: this.account_id,
				// 				cash_type: this.cash_type,
				// 				money: this.money,
				// 				number: this.number,
				// 				frozen: this.frozen,
				// 				rz_money: this.rz_money, //融资金额
				// 				rg_sxf: this.rg_sxf, //认购手续费
				// 				rz_llv: this.rz_llv, //融资利率
				// 				yj_rzf: this.yj_rzf, //预融资费
				// 				total: this.total, //合计
				// 			}
				// 		}).then((res)=>{
				// 			this.$navTo('/orders_history')
				// 		})
				// 	},this.$t('选择账号'))
				// })
					
				
				
			},
			changAcctive(account_id){
				this.account_id = account_id
				console.log(account_id,this.account_id)
			},
			toAgreedPdf(type){
				// location.href = "/hk_eipo/static/Hong_Kong_IPO.pdf"
				if(type == 1){
					// location.href = "https://pioneer-brokers-oss.oss-cn-shenzhen.aliyuncs.com/hk_eipo/Pioneer%20Broker%20HK%20IPO%20Subscription%20Policy.pdf"
					// if(this.$getLocale()=='zh-Hans'){
					// 	location.href = "https://pioneer-brokers-oss.oss-cn-shenzhen.aliyuncs.com/hk_eipo/Pioneer%20Broker%20HK%20IPO%20Subscription%20Policy.pdf"
					// }else{
					// 	// location.href = "https://www.pbnz.net/hk_eipo/pdf/Pioneer Broker HK IPO Subscription Policy.pdf"
					// 	location.href = "https://pbnz.net/hk_eipo/Pioneer%20HK%20IPO%20Policy.html"
					// }
					location.href = "https://www.pbnz.net/doc/hk_ipo_policy"
				}
				else if(type == 2){
					// location.href = "https://pioneer-brokers-oss.oss-cn-shenzhen.aliyuncs.com/hk_eipo/Pioneer%20Brokers%20HK%20IPO%20Subscription%20Client%20Agreement.pdf"
					// if(this.$getLocale()=='zh-Hans'){
					// 	location.href = "https://pioneer-brokers-oss.oss-cn-shenzhen.aliyuncs.com/hk_eipo/Pioneer%20Brokers%20HK%20IPO%20Subscription%20Client%20Agreement.pdf"
					// }else{
					// 	// location.href = "https://www.pbnz.net/hk_eipo/pdf/Pioneer Brokers HK IPO Subscription Client Agreement.pdf"
					// 	location.href = "https://pbnz.net/hk_eipo/Pioneer%20Client%20Agreement.html"
					// }
					location.href = "https://www.pbnz.net/doc/hk_ipo_client_agreement"
				}
				else if(type == 3){
					location.href = this.info.prospectus
				}
			},
			navBack(){
				this.$navBack()
			},
			getInfo(){
				this.$httpGet({
					// url:'test/gp_info',
					url:'ipos/info',
					data:{
						id:this.id
					}
				}).then((res)=>{
					this.info = res.data.info
					// this.ky_money = this.info.AVBLCash
					// if(this.cash_type == 'cash'){
					// 	this.frozen = this.money
					// 	this.rg_sxf = 50
					// 	this.total = parseInt(this.money) + parseInt(this.rg_sxf)
					// }
					// else{
					// 	if(this.money > this.ky_money){
					// 		this.frozen = this.ky_money
					// 		this.rz_money = parseInt(this.money) - parseInt(this.ky_money)
					// 	}
					// 	else{
					// 		this.frozen = this.money
					// 		this.rz_money = this.ky_money * 3
					// 	}
					// 	this.rg_sxf = 100
					// 	this.rz_llv = 8
						
					// 	var frozen_day = this.DateDiff(this.info.ExpListingTime, this.info.SubCloseTime) - 2
					// 	console.log('frozen_day',this.rz_money , this.rz_llv , frozen_day)
					// 	// this.yj_rzf = parseInt(this.rz_money * (this.rz_llv/100) * (frozen_day/365))
					// 	// 预计融资费用 = 【融资金额】 * 【年化利率】 * 【天数/365】
					// 	this.yj_rzf = (this.rz_money * (this.rz_llv/100) * (frozen_day/365)).toFixed(2)
					// 	// console.log(this.yj_rzf,this.info.ResultAnnounceTime,frozen_day)
					// 	// 合计（融资认购）：认购金额 + 认购手续费 + 预计融资费用
					// 	this.total = parseInt(this.money) + parseInt(this.rg_sxf) + this.yj_rzf
					// 	// this.yj_rz_fy = this.rz_money * 0.08 * 
					// }
					// var frozen_day = this.DateDiff(this.info.application_end_date_time, this.info.listing_date) + 1
					this.frozen_day = this.DateDiff(this.info.allotment_result_date, this.info.application_end_date_time)
					console.log(this.info.allotment_result_date, this.info.application_end_date_time,this.frozen_day)
					if(this.cash_type == 'cash'){
						// this.frozen = this.money
						// this.rg_sxf = this.info.ipo_fee_for_fully_paid
						this.frozen = 0
						this.rg_sxf = 50
						
						this.rz_money = 0
						this.rz_llv = 0
						this.yj_rzf = 0
					}
					else{
						// this.frozen = this.info.margin_rate * this.money
						// this.rg_sxf = this.info.ipo_fee_for_financed
						this.frozen = 0
						this.rg_sxf = 50
						
						// this.rz_money = this.money - this.frozen
						// 融资金额
						this.rz_money = this.money
						// 上市佣金税费
						this.ss_yjsf = (this.money * 1.0085 / 100).toFixed(2)
						console.log('this.ss_yjsf', this.ss_yjsf)
						// 融资利率
						this.rz_llv = ((this.info.financing_interest_rate * 100) + this.info.financing_interest_rate_markup).toFixed(2)
						//  预计融资费用 = 【融资金额 + 上市佣金税费】× 【年化利率】×【天数/365】
						console.log('yj_rzf', `(${this.rz_money} + ${this.ss_yjsf}) * (${this.rz_llv}/100) * (this.frozen_day/365)`)
						this.yj_rzf = ((parseFloat(this.rz_money) + parseFloat(this.ss_yjsf)) * (this.rz_llv/100) * (this.frozen_day/365)).toFixed(2)
					}
					this.total = (parseFloat(this.money || 0) + parseFloat(this.rg_sxf || 0) + parseFloat(this.yj_rzf)).toFixed(2)
				})
			},
			DateDiff(end, start){
				var today = start?new Date(start):new Date();
				var end = new Date(end);
				
				// today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
				// end = new Date(end.getFullYear(), end.getMonth(), end.getDate());
				
				if(end > today){
					var days = parseInt(Math.abs(end - today) / 1000 / 60 / 60 / 24);
				}else{
					var days = parseInt(Math.abs(end - today) / 1000 / 60 / 60 / 24); // 如果不限制对⽐时间和当前时间⼤⼩可以不⽤if
				}
				return days;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(244, 245, 247);
	}

	.top_box {
		height: 90rpx;
		width: 100%;
		background-color: #FFFFFF;
		box-shadow: 0rpx 5rpx 5rpx rgb(226, 227, 229);
	}

	.top_box2 {
		width: 704rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left_back {
		line-height: 90rpx;
		width: 20rpx;
		height: 30rpx;
	}

	.top_tex {
		color: $font-color-two;
		font-size: 30rpx;
		line-height: 90rpx;
	}

	.headset {
		width: 45rpx;
		height: 40rpx;
	}

	.car {
		// width: 715rpx;
		/* height: 722rpx; */
		padding-bottom: 24rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: auto;
		margin-top: 24rpx;
		box-shadow: 0rpx 5rpx 5rpx rgb(226, 227, 229);
		/* border: #007AFF 1rpx solid; */
	}

	.name_car {
		height: 120rpx;
		// width: 650rpx;
		margin: auto 33rpx;
		position: relative;
		display: flex;

		border-bottom: rgb(244, 245, 247) 1rpx solid;
	}

	.logo {
		width: 60rpx;
		height: 60rpx;
		border-radius: 8rpx;
		background-color: rgb(255, 207, 207);
		line-height: 60rpx;
		text-align: center;
		position: absolute;
		top: 30rpx;
		color: rgb(252, 77, 77);
	}

	.car_text {
		position: absolute;
		left: 78rpx;
		top: 30rpx;
	}

	.car_text1 {
		font-size: 28rpx;
		font-weight: bold;

	}

	.car_text2 {
		// font-size: 15rpx;
		color: rgb(153, 153, 153);
		height: 20rpx;
		font-size: 40rpx;
		transform: scale(0.5);
		transform-origin: left top;
	}

	.detil {
		// width: 650rpx;
		margin: auto 33rpx;
	}

	.first_box {
		margin-top: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.two_box {
		margin-top: 42rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.third_box {
		margin-top: 42rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: rgb(244, 245, 247) 1rpx solid;
		padding-bottom: 32rpx;
	}

	.total_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding-top: 24rpx;
		margin-top: 42rpx;
	}

	.idera {
		font-size: 25rpx;
		color: $font-color-one;
	}

	.right_idera {
		font-size: 25rpx;
		color: $font-color-two;
	}

	.total {
		font-size: 26rpx;
		font-weight: bold;
	}

	.right_total {
		font-size: 24rpx;
		color: $logo-font-color;
		font-weight: bold;
	}

	.agree_box{
		box-shadow: 0rpx 5rpx 5rpx rgb(226, 227, 229);
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 15rpx 0;
		
		.text_row{
			font-size: 25rpx;
			line-height: 40rpx;
		}
		.check_row {
			// height: 80rpx;
			line-height: 1;
			// width: 715rpx;
			margin: auto;
			position: relative;
			display: flex;
			align-items: center;
		}

		.tick_box {
			width: 27rpx;
			height: 27rpx;
			margin: 10rpx 30rpx;
			// position: absolute;
			border: $font-color-one 2rpx solid;
			// left: 30rpx;
			// top: 26rpx;
			position: relative;
			flex-shrink: 0;

		}

		.tick {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: -10rpx;
			left: -10rpx;
			/* line-height: 50rpx; */
			// text-align: center;
		}

		.ageer_text1 {
			font-size: 25rpx;
			color: $font-color-two;
			vertical-align: middle;
		}

		.ageer_text2 {
			font-size: 25rpx;
			padding-left: 10rpx;
			color: $logo-font-color;
			vertical-align: middle;
		}
	}
	
	.last_box {
		// height: 216rpx;
		// width: 715rpx;
		box-shadow: 0rpx 5rpx 5rpx rgb(226, 227, 229);
		background-color: #FFFFFF;
		margin: auto;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		
	}

	.last_text1 {
		font-size: 26rpx;
		color: rgb(122, 122, 122);
		padding-left: 30rpx;
		padding-top: 25rpx;
	}

	.last_text2 {
		font-size: 22rpx;
		color: $font-color-one;
		padding-left: 30rpx;
		padding-top: 5rpx;
		padding-right: 40rpx;
		letter-spacing:2rpx;  
	}
	.but{
		width: 100%;
		padding-top: 100rpx;
		padding-bottom: 55rpx;
		/* margin-top: 200rpx; */
		display: flex;
		margin: auto;
		justify-content: space-around;
		align-items: center;
	}
	
	.message-box{
		width: 400rpx;
		.account-item{
			line-height: 80rpx;
			position: relative;
			text-align: center;
			&.acctive::before{
				content: '';
				display: block;
				position: absolute;
				left: 50rpx;
				top: 30rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				background-color: #0877C6;
				z-index: 1000;
			}
		}
		.account-item + .account-item{
			border-top: 1rpx solid #ccc;
		}
	}
</style>
